<template>
  <div  style="padding-bottom:5rem;">
    <div>
      <Notice/>
      <nut-row type="flex" gutter="10" align="center" style="margin-top:1rem;">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <div class="balance-box">
            <img v-if="hasHeadphotoLoaded" @click="handleClickHeadphoto" :style="rotateVal" class="headphoto" :src="user.headphoto?user.headphoto:defaultPhoto" alt="">
            <div>
              {{user.username}} <span style="font-size:0.9rem;" v-if="user.parent_id">({{ $t('ProfilePageBAK.tjr') }}:{{user.parent.username}})</span>
            </div>
            <div>
              {{ $t('ProfilePageBAK.wdqb') }}: <b>{{user.balance}}</b>{{ $t('ProfilePageBAK.y') }}
              <a href="/#/withdraw" style="color:#fff;margin-left:0.6rem;border-bottom: thin solid #fff;">{{ $t('ProfilePageBAK.tx') }}</a>
            </div>
            <div class="last-date">
              {{ $t('ProfilePageBAK.zhczsj') }}:{{user.last_recharge_at}}
            </div>
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:0.5rem;">
          <div class="tuijian-box">
            <ul>
              <li>{{ $t('ProfilePageBAK.yqxhbzc') }}</li>
              <li>{{ $t('ProfilePageBAK.xyzcjl') }} ✔ </li>
              <li>{{ $t('ProfilePageBAK.xyxhbczhk') }} ✔ </li>
              <li>{{ $t('ProfilePageBAK.xyxhbmdrwhk') }} ✔ </li>
            </ul>
            <img src="/static/img/tips.png" alt="">
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <div class="flex-content flex-content-light">
              <a href="/#/bind_account">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bangdingpingtai"></use>
                </svg>
                {{ $t('ProfilePageBAK.zhbd') }}
              </a>
            </div>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <a href="/#/profile_detail">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shenfenrenzheng"></use>
              </svg>
              {{ $t('ProfilePageBAK.smrz') }}
            </a>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <div class="flex-content flex-content-light">
              <a href="/#/bank">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhangqia"></use>
                </svg>
                {{ $t('ProfilePageBAK.byxk') }}
              </a>
            </div>
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center" style="margin:0.7rem 0;">
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <a href="/#/level_distribution">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tubiaozhizuomoban"></use>
              </svg>
              {{ $t('ProfilePageBAK.wdtd') }}
            </a>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <div @click="handleClickChangePwd" class="flex-content flex-content-light">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-mima"></use>
              </svg>
              {{ $t('ProfilePageBAK.mmxg') }}
            </div>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <a href="/#/invite">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang"></use>
              </svg>
              {{ $t('ProfilePageBAK.yqhy') }}
            </a>
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <a href="/#/income">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouyi"></use>
              </svg>
              {{ $t('ProfilePageBAK.grzh') }}
            </a>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <div @click="handleClickOpenServer" class="flex-content flex-content-light">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu"></use>
                </svg>
                {{ $t('ProfilePageBAK.zxkf') }}
            </div>
          </div>
        </nut-col>
        <nut-col :span="8">
          <div class="flex-content flex-content-light type-item">
            <a href="/#/logout">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuichu"></use>
              </svg>
              {{ $t('ProfilePageBAK.tcyh') }}
            </a>
          </div>
        </nut-col>
      </nut-row>
      <nut-popup position="bottom" closeable close-icon="cross" v-model="showChangePwd" :style="{ height: '20%' }" close-icon-position="top-right">
        <div style="padding:3rem 0.5rem">
          <nut-row>
            <nut-col :span="16">
              <nut-textinput
                placeholder="$t('ProfilePageBAK.qsrxdmm')"
                v-model="newPassword"
                label=""
                type="password"
              />
            </nut-col>
            <nut-col :span="8">
              <nut-button
                @click="handleClickUpdatePwd"
                type="light"
              >{{ $t('ProfilePageBAK.bc') }}
              </nut-button>
            </nut-col>
          </nut-row>
        </div>
      </nut-popup>
      <nut-popup v-model="showPhotoBox" position="left" :style="{ width: '30%',height:'100%' }">
        <ul class="headphoto-box">
          <li v-for="item in headphotoArr">
            <img :src="item" alt="" @click="handleClickSelPhoto(item)">
          </li>
        </ul>
      </nut-popup>
    </div>
    <MainNav nav_index="4"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";

export default {
  name: 'ProfilePage',
    components: {MainNav,Notice},
    data () {
    return {
      msg: 'Hello profile',
      user:{},
      showChangePwd: false,
      newPassword: '',
        rotateVal:'',
        hasHeadphotoLoaded: false,
        showPhotoBox: false,
        defaultPhoto:'/static/img/headphoto/2.2.jpg',
        headphotoArr:[
          "/static/img/headphoto/1.1.jpg",
          "/static/img/headphoto/1.2.jpg",
          "/static/img/headphoto/2.0.jpg",
          "/static/img/headphoto/1.4.jpg",
          "/static/img/headphoto/1.5.jpg",
          "/static/img/headphoto/1.6.jpg",
          "/static/img/headphoto/1.7.jpg",
          "/static/img/headphoto/1.8.jpg",
          "/static/img/headphoto/1.9.jpg",
          "/static/img/headphoto/2.1.jpg",
          "/static/img/headphoto/2.2.jpg",
          "/static/img/headphoto/2.3.jpg",
          "/static/img/headphoto/2.5.jpg",
        ]
    }
  },
    methods:{
        handleClickNavTitle(){

        },
        getData(){
            this.$axios.get(this.$api_url.user).then((res)=>{
                this.user = res.data;
                this.hasHeadphotoLoaded = true
                setTimeout(()=>{
                    this.rotateVal="transform:rotate(360deg)";
                },300);
            })
        },
        handleClickOpenServer(){
            this.$toast.text("正在链接...");
            _MEIQIA('init');
        },
        handleClickHeadphoto(){
           this.showPhotoBox = true;
        },
        handleClickChangePwd(){
            this.showChangePwd = true;
        },
        handleClickUpdatePwd(){
            this.showChangePwd = false;
            if(this.newPassword){
                this.$axios.post(this.$api_url.update_pwd,this.$qs.stringify({
                    val:this.newPassword
                })).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                })
            }
        },
        handleClickSelPhoto(val){
            this.showPhotoBox = false;
            this.user.headphoto = val;
            this.$axios.post(this.$api_url.save_headphoto,this.$qs.stringify({
                url:val
            })).then((res)=>{
            })
        },
    },
    mounted() {
      this.getData();
    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  a{
    color:#111;
  }
  .balance-box{
    height: 6rem;
    line-height: 2rem;
    text-align: left;
    padding: 0.5rem;
    background: linear-gradient(#ffe35be8, #f9834be0);
    color: #fff;
    border-radius: 0.5rem;
    position: relative;
  }
  .balance-box .headphoto{
    height: 4rem;
    width: 4rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0.7rem #fff;
    transition: all 3s;
  }
  .balance-box .tixian{
    float: right;
    font-weight: bold;
    color: #666;
    text-shadow: 0 0 0.1rem #fff;
    padding-left: 1rem;
    cursor: pointer;
  }
  .balance-box .last-date{
    color: #eee;
    font-size: 0.9rem;
  }
  .type-item{
    overflow: hidden;
    padding:0.4rem 0.2rem;
    background-color:#fff;
    width:100%;
    height:100%;
    border-radius: 0.5rem;
  }
  .type-item svg{
    width:100%;
    height:4rem;
  }
  .tuijian-box{
    background-color: rgb(254, 250, 216);
    color: orange;
    text-align: left;
    padding: 0.5rem 1rem;
    position: relative;
    border-radius: 0.3rem;
  }
  .tuijian-box img{
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 2rem;
    right: 2rem;
  }
  .headphoto-box{
    padding:0.6rem;
    text-align: center;
  }
  .headphoto-box::-webkit-scrollbar {
    display:none
  }
  .headphoto-box img{
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border: thin solid #ccc;
  }
</style>
